<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人简介</title>

  <link rel="stylesheet" href="./css/L1.css">

</head>

<body>

  <!-- 最上方的个人图片区域 -->
  <div class="top-box">
    <!-- 第一行是姓名和菜单 -->
    <div class="l1">
      <div>DarkKnight</div>
      <div class="menu">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>

    <!-- 核心区域 -->
    <div class="main-box">

      <div style="display: flex;">
        <div class="hi">
          Hi！Everyone
        </div>
      </div>

      <div class="info">
        <div>Michael Hoo</div>
        <div>Front-end developer</div>
      </div>

      <div>
        Make designs mainly logos, visual
        identities, apps <br>
        & websites, social mediaand magazines.
      </div>

      <div style="display: flex;">
        <div class="get">get in touch</div>
      </div>

    </div>

  </div>

  <!-- 关于 -->
  <div class="about-box">

    <!-- 标题区域 -->
    <div class="about-title">
      <div>About</div>
      <div>Who Am I</div>
    </div>

    <!-- 简介和技能 -->
    <div class="intro">

      <div>

        <div class="intro-text">
          I’m Chris Lee, a front-end web developer and Web Page Designer based in New York, USA. I've been working for the last 10 years.
        </div>

        <div class="intro-text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>

        <div class="intro-about">
          <div>
            <span>ABOUT ME</span>
            <span>→</span>
          </div>
        </div>

      </div>

      <div>
        <!-- 一组技能 -->
        <div class="skill-text">PHOTOSHOP</div>

        <div class="progress-box">
          <div style="width: 70%;"></div>
          <div></div>
        </div>

        <!-- 一组技能 -->
        <div class="skill-text">Illustrator</div>

        <div class="progress-box">
          <div style="width: 40%;"></div>
          <div></div>
        </div>

        <!-- 一组技能 -->
        <div class="skill-text">Figma</div>

        <div class="progress-box">
          <div style="width: 60%;"></div>
          <div></div>
        </div>


        <!-- 一组技能 -->
        <div class="skill-text">after effect</div>

        <div class="progress-box">
          <div style="width: 90%;"></div>
          <div></div>
        </div>


        <!-- 一组技能 -->
        <div class="skill-text">indesign</div>

        <div class="progress-box">
          <div style="width: 10%;"></div>
          <div></div>
        </div>

      </div>

    </div>

  </div>

  <!-- 作品展示 -->
  <div>

    <div class="portfolio">
      <div>Portfolio</div>
      <div>
        <span>Latest Works</span>
      </div>
    </div>

    <!--两列图片区域 -->
    <div class="p-box">
      <div>

        <div class="box-16-8">
          <img src="./images/portfolio2.jpg" alt="">
        </div>

        <div class="p-info">
          Magazine front design
        </div>

        <div class="box-9-9">
          <img src="./images/portfolio5.jpg" alt="">
        </div>

        <div class="p-info">
          Product Bottle Design
        </div>

        <div class="box-8-10">
          <img src="./images/portfolio5.jpg" alt=""></img>
        </div>

        <div class="p-info">
          Magazine & brochure mockup
        </div>


      </div>
      <!-- 左右的分割线 -->
      <div>

        <div class="box-8-10">
          <img src="./images/portfolio5.jpg" alt="">
        </div>

        <div class="p-info">
          Magazine & brochure mockup
        </div>

        <div class="box-9-9">
          <img src="./images/portfolio5.jpg" alt="">
        </div>

        <div class="p-info">
          Product Bottle Design
        </div>

        <div class="box-16-8">
          <img src="./images/portfolio2.jpg" alt="">
        </div>

        <div class="p-info">
          Magazine front design
        </div>


      </div>

    </div>

  </div>

  <!-- 图片渐变遮罩动画 -->
  <div class="mask-box">

    <div>
      <img src="./images/portfolio2.jpg" alt="">
    </div>

    <div>
      <img src="./images/portfolio2.jpg" alt="">
    </div>

    <div>
      <img src="./images/portfolio2.jpg" alt="">
    </div>

  </div>


</body>

</html>